<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="mb-[10px]" v-show="showSearch">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
                        <el-form-item label="报价时间" prop="createTime">
                            <el-date-picker v-model="queryParams.createTime" type="daterange" start-placeholder="报价开始时间"
                                end-placeholder="报价结束时间" @change="handleTimeChange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                        <el-form-item label="报价码" prop="optionalCode">
                            <el-input v-model="queryParams.optionalCode" placeholder="请输入报价码" clearable
                                style="width: 240px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="报价备注" prop="remark">
                            <el-input v-model="queryParams.remark" placeholder="请输入报价备注" clearable style="width: 240px"
                                @keyup.enter="handleQuery" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
                            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="hover">
            <el-table ref="roleTableRef" v-loading="loading" :data="dataList">
                <el-table-column label="报价码" prop="optionalCode" align="center" />
                <el-table-column label="报价时间" prop="createTime" align="center" />
                <el-table-column label="产品名称" prop="productStyleName" align="center" />
                <el-table-column label="体量" prop="volume" align="center" />
                <el-table-column label="备注" prop="remark" align="center" />
                <el-table-column label="编辑备注" align="center">
                    <template #default="scope">
                        <el-button @click="viewNotesClick(scope.row)" link type="primary">{{ scope.row.remark ? '修改' :
                            '添加' }}备注</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="详情" placement="top">
                            <el-button @click="detailsClick(scope.row.optionalCode)" link type="primary"
                                icon="Tickets"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" @click="deleteClick(scope.row.id)" icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-if="queryTotal > 0" v-model:total="queryTotal" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <Detail :visible="modals[0].visible" :initList="modals[0].data" @close="closeModal(0)" />
        <Notes :visible="modals[1].visible" :initList="modals[1].data" @submit="getList" @close="closeModal(1)" />
    </div>
</template>

<script setup lang="ts">
import Detail from './components/detail.vue'
import Notes from './components/notes.vue'
import { getQuotationList, deleteQuotation, getQuotationDetail } from '@/api/customerQuotation/index'
import { useModal } from '@/hooks/useModal'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { modals, openModal, closeModal } = useModal(2)

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    optionalCode: '',
    remark: '',
    createTime: '',
    startDate: '',
    endDate: '',
})
const loading = ref(false)
const queryTotal = ref(0);
const dataList = ref<any>([])
const showSearch = ref(true)


const viewNotesClick = (row: any) => {
    openModal(1, {
        remark: row.remark,
        id: row.id
    })
}

const detailsClick = (code: number) => {
    openModal(0, async () => {
        try {
            const { data } = await getQuotationDetail(code)
            return {
                ...data
            }
        } catch (error) {
            console.log(error)
        }
    })
}

/** 日期选择 */
const handleTimeChange = (val: any) => {
  queryParams.value.startDate = val[0];
  queryParams.value.endDate = val[1];
};

const deleteClick = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除此报价信息吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            try {
                await deleteQuotation(id)
                proxy?.$modal.msgSuccess('删除成功');
                getList();
            } catch (error) {

            }
        })
}

const getList = async () => {
    loading.value = true
    try {
        const { rows, total } = await getQuotationList(queryParams.value);
        queryTotal.value = total;
        dataList.value = rows;
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

onMounted(() => {
    getList();
})

/**
 * 搜索按钮操作
 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置 */
const resetQuery = () => {
    queryParams.value.startDate = ''
    queryParams.value.endDate = ''
    queryParams.value.remark = ''
    queryParams.value.createTime = ''
    queryParams.value.optionalCode = ''
    handleQuery();
}
</script>
<style lang="scss" scoped>
::v-deep .el-table--default .cell {
    font-size: 20px !important;
}

::v-deep .el-table__cell {
    padding: 20px 0;
}

::v-deep .el-button {
    font-size: 20px;
}
</style>